import React, { Component } from 'react'

import { PickerView } from 'antd-mobile'

import FilterFooter from '../../../../components/FilterFooter'


export default class FilterPicker extends Component {
  state = {
    value: this.props.defaultValues
  }
  componentDidUpdate(prevProps) {
    const { openType, defaultValues } = this.props
    // console.log(openType, defaultValues);
    
    if (openType !== prevProps.openType) {
      this.setState({
        value: defaultValues
      })
    }
  }
  // 这个事件会在我们选择的时候，就触发
  handleChange = value => {
    // console.log('value',value);
    
    this.setState({
      value
    })
  }
  render() {
    const { onClose, onSave, data, cols} = this.props
    return (
      // 幽灵标签<></>,挂载时不会产生DOM的标签
      <>
        {/* 选择器组件： */}
        <PickerView data={data} value={this.state.value} cols={cols} onChange={this.handleChange}/>

        {/* 底部按钮 */}
        <FilterFooter onCancel={onClose} onOk={() => onSave(this.state.value)} />
      </>
    )
  }
}
